<template>
    <div class="liuyu_warp">
        <li v-for="(item, index) in listdata" :key="index" class="liuyu_warp_lis">
            <p class="itemP">{{ item.name }}</p>
            <div>
                <span v-for="sonitem in item.children" class="sonitemSpan">{{ sonitem }}</span>
            </div>
        </li>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { liuyudata } from "../../data/datalist"
const listdata = ref(liuyudata)

</script>

<style lang="less" scoped>
.liuyu_warp {
    height: 100%;
    width: 100%;

    .liuyu_warp_lis {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        list-style: none;
        color: #fff;
        margin-right: 0.3rem;
        cursor: pointer;
        .itemP{
             color: #1DE0EF;
             width: 25%;
             margin-right: 0.5rem;
        }
    }
    .sonitemSpan{
        margin-right: 0.3rem;
        cursor: pointer;
    }
}
</style>